<template>
  <div class="shop-car-box">
    <div class="shop-car-body">
      <van-card
        :num="item.num"
        :price="item.price"
        :title="item.title"
        :thumb="item.img"
        v-for="(item, idx) in shopCarList"
        :key="idx"
      >

        <template #footer>
            <div>
                <button @click="changeNum(-1, item.id)">减</button>
                <span>{{item.num}}</span>
                <button @click="changeNum(1, item.id)">加</button>
            </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from "vuex";
import {  computed } from 'vue'

const store = useStore();

// 获取购物车数据
const shopCarList = computed(()=> {
    return store.state.shopCarList
})
const changeNum= (num:number, id: string) => {
    store.commit('FILTER_SHOP_LIST', {num, id})
}


</script>

<style lang="scss" scoped>
.shop-car-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
